<script setup lang="ts">
import { useCRUD } from '@/hooks/web/useCRUD'
import { reactive } from 'vue'
import type { FormRules } from 'element-plus'
import { addScoringTemplateApi, editScoringTemplateApi, deleteScoringTemplateApi } from '@/api/mock'
interface RuleForm {
  name: string
  date: string
  address: string
  [key: string]: any
}

const emit = defineEmits(['updateList'])

const rules = reactive<FormRules>({
  date: [{ required: true, message: '请输入日期', trigger: 'blur' }],
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  address: [{ required: true, message: '请输入地址', trigger: 'blur' }]
})

const handleShow = (type: 'add' | 'edit', row: RuleForm | null) => {
  if (type === 'add') {
    handleAdd()
  } else {
    handleEdit(row as RuleForm)
  }
}

const handleClose = () => {
  modalVisible.value = false
}

const { modalTitle, modalVisible, modalAction, modalFormRef, modalForm, modalLoading, handleAdd, handleEdit, handleSave } = useCRUD({
  name: '测试一下',
  initForm: { date: '', name: '', address: '' },
  doCreate: addScoringTemplateApi,
  doUpdate: editScoringTemplateApi,
  doDelete: deleteScoringTemplateApi,
  refresh: () => emit('updateList')
})

defineExpose({ handleShow })
</script>

<template>
  <TmeDialog v-model="modalVisible" :title="modalTitle" @close="handleClose">
    <el-form ref="modalFormRef" :model="modalForm" :rules="rules">
      <el-form-item prop="date" label="日期">
        <el-input v-model="modalForm.date" />
      </el-form-item>
      <el-form-item prop="name" label="姓名">
        <el-input v-model="modalForm.name" />
      </el-form-item>
      <el-form-item prop="address" label="地址">
        <el-input v-model="modalForm.address" />
      </el-form-item>
    </el-form>
    <template v-if="modalAction !== 'view'" #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button @click="handleSave" :loading="modalLoading">提交</el-button>
    </template>
  </TmeDialog>
</template>

<style scoped lang="scss"></style>
